<script setup lang="ts">
import { ref } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import { list, addOrUpdateAddress } from '@/api/address'
import type { Address } from '@/api/address/type'
import { BaseResponse } from '@/api/base'
import { toast } from '@/utils/common'

const addressList = ref<Address[]>([])
const formAddress = ref<Address>({})
const popup = ref()
const rules = ref({
  building: {
    type: 'string',
    required: true,
    message: '请填写楼栋',
    trigger: ['blur', 'change']
  },
  address: {
    type: 'string',
    required: true,
    message: '请填写详细地址',
    trigger: ['blur', 'change']
  },
  name: {
    type: 'string',
    required: true,
    message: '请填写姓名',
    trigger: ['blur', 'change']
  },
  phone: {
    type: 'string',
    required: true,
    message: '请填写手机号',
    trigger: ['blur', 'change']
  },
})
const form = ref()
const type = ref<string>()

const loadAddress = async () => {
  const res: BaseResponse = await list()
  addressList.value = res.data
}

onLoad(async (option: any) => {
  type.value = option.type
  loadAddress()
})

const chooseAdd = (item: Address) => {
  if (!type.value) {
    return
  }
  uni.$emit('sendAddress', item)
  uni.navigateBack()
}

const editAddress = (item: Address) => {
  popup.value?.open()
  formAddress.value = item ? JSON.parse(JSON.stringify(item)) : {
    building: '',
    address: '',
    name: '',
    phone: '',
    isDefault: 0
  }
}
const submit = async () => {
  const valid = await form.value?.validate()
  if (!valid) {
    return
  }
  try {
    const res: BaseResponse = await addOrUpdateAddress(formAddress.value)
    popup.value?.close()
    toast(res.tips)
    loadAddress()
  } catch (error) {
    toast(error.tips)
  }
}

</script>

<template>
  <view class="address">
    <view class="address-opt">
      <uv-text prefixIcon="plus" align="right" text="添加收货地址" @click="editAddress" color="#ff7744"
        :iconStyle="{ color: '#ff7744' }"></uv-text>
    </view>
    <uv-line color="#f1f1f1" margin="0 0 20rpx 0"></uv-line>
    <view class="address-list">
      <view class="address-item" v-for="(item, index) in addressList" :key="index">
        <view class="address-item-content" @click="chooseAdd(item)">
          <view class="address-item-building">{{ item.building }}</view>
          <view class="address-item-address">{{ item.address }}</view>
          <view class="address-item-name">
            <view>{{ item.name }} {{ item.phone }}</view>
            <uv-tags class="address-item-name-tag" text="默认" size="mini" bgColor="#ff7744" borderColor="#ff7744"
              v-if="item.isDefault === 1"></uv-tags>
          </view>
        </view>
        <view class="address-item-edit">
          <uv-icon name="edit-pen" size="48rpx" @click.stop="editAddress(item)"></uv-icon>
        </view>
      </view>
    </view>
    <uv-popup ref="popup" mode="bottom">
      <uv-form labelPosition="top" class="popup-form" labelWidth="400rpx" :labelStyle="{ color: '#999' }"
        :model="formAddress" :rules="rules" borderBottom ref="form">
        <uv-form-item label="楼栋" prop="building" required borderBottom>
          <uv-input placeholder="楼栋" v-model="formAddress.building" border="none">
          </uv-input>
        </uv-form-item>
        <uv-form-item label="详细地址与门牌号" prop="address" required borderBottom>
          <uv-input placeholder="详细地址与门牌号" v-model="formAddress.address" border="none"></uv-input>
        </uv-form-item>
        <uv-form-item label="收货人名字" prop="name" required borderBottom>
          <uv-input placeholder="收货人名字" v-model="formAddress.name" border="none"></uv-input>
        </uv-form-item>
        <uv-form-item label="手机号" prop="phone" required borderBottom>
          <uv-input placeholder="手机号" v-model="formAddress.phone" border="none"></uv-input>
        </uv-form-item>
        <uv-form-item label="默认地址" prop="isDefault">
          <uv-switch v-model="formAddress.isDefault" :inactiveValue="0" :activeValue="1"
            activeColor="#f14d4d"></uv-switch>
        </uv-form-item>
        <uv-form-item>
          <uv-button align="center" class="form-btn" color='#ff7744' @click="submit" text="保存"></uv-button>
        </uv-form-item>
      </uv-form>
    </uv-popup>
  </view>
</template>

<style lang="scss">
.address {
  padding: 20rpx;
  background-color: #fff;
}

.address-opt {
  margin-bottom: 20rpx;
}

.address-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20rpx;
  padding-bottom: 20rpx;
  border-bottom: 1px solid #f1f1f1;

  .address-item-content {
    display: flex;
    flex-direction: column;
    width: calc(100% - 100rpx);

    .address-item-building {
      font-size: 24rpx;
      color: #999;
      margin-bottom: 10rpx;
    }

    .address-item-address {
      font-weight: bold;
      font-size: 28rpx;
      margin-bottom: 10rpx;
    }

    .address-item-name {
      display: flex;
      align-items: center;
      font-size: 26rpx;

      .address-item-name-tag {
        margin-left: 10rpx;
      }
    }
  }
}

.popup-form {
  padding: 40rpx;

  .form-btn {
    margin-top: 20rpx;
    width: 100%;
  }
}
</style>
